import { Icon, List,Modal } from "antd-mobile";
import React from "react";
import { connect } from "dva";
const ListItem = List.Item
import styles from "./index.less";

class Tab4 extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
   const {data} = this.props
    return (
      <div style={{width:'100%'}}>
        <div className={styles.item}>
        <span>当前处理人:</span>
        <span>{data.currPsn}</span>
         </div>
         <div className={styles.item}>
         <span>当前处理状态:</span>
           <span>{data.stat}</span>
         </div>
         <div className={styles.item}>
           <div className={styles.line}></div>
           <span> </span>
         </div>
       <List style={{width:'100%'}}>
            {
              data.flowhis.map((item,i) =>{
               return( <ListItem key={i}>
               <div  style={{
              display: "flex",
              alignItems: "center",
              backgroundColor: "#fff",
              paddingTop: 10,
              paddingBottom:10
            }} className={styles.tab2}>
             <span className={styles.icon}>{i+1}</span>
             <div style={{
              display: "flex",
              flex:1,
              marginLeft:20,
              flexDirection: 'column',
              alignItems: "flex-start",
              backgroundColor: "#fff"
            }}>
            <span>{item.clStat}</span>
            <div style={{
              display:'flex',
              alignItems: 'center',
              width:'100%',
              paddingRight:20,
              marginTop:10,
              justifyContent:'space-between'
            }}>
              <span>{item.clPerson}</span>
              <span>{item.clDate}</span>
            </div>
             </div>
               </div>
             </ListItem>)
               })
             }
           </List>
      </div>
    )
  }
}
export default connect(detail => detail)(Tab4);
